Grokking JavaScript Fundamentals
Rate this course
Ask Author
Contribute
Back to course home

0% completed

Vote For New Content
Introduction
Who should take this course?
Course Overview
Introduction to JavaScript
JavaScript Basics
JavaScript - Hello World
JavaScript - Comments
Quiz
JavaScript Variables and Operators
JavaScript - Variables
JavaScript - Operators
Quiz
JavaScript Conditionals
Introduction to Conditional Statements in JavaScript
JavaScript - If...Else
JavaScript - Switch Case
Quiz
JavaScript Objects
Introduction to Objects in JavaScript
JavaScript - Number
JavaScript - Boolean
JavaScript - Math
JavaScript - Date
Quiz
JavaScript - Functions
Introductions to Function in JavaScript
JavaScript - Variable Scope
JavaScript - Default Parameters
JavaScript - Arrow Functions
Quiz
Introduction to Strings in JavaScript
JavaScript - String Methods
Introduction to Array in JavaScript
JavaScript - Array Methods
Quiz
Introduction to loops in JavaScript
JavaScript - for loop
JavaScript - while loop
JavaScript - do-while loop
JavaScript - for-in loop
JavaScript - for-of loop
JavaScript - Loop Control
Quiz
JavaScript - Maps
JavaScript - Sets
Quiz
Where to Go from Here
Introductions to Function in JavaScript

Functions are one of the fundamental building blocks in JavaScript, enabling you to encapsulate a block of code and execute it wherever and whenever you want. Functions allow for code reuse, making your programs more modular, maintainable, and scalable. They can take parameters, perform actions based on those parameters, and return a value.

In JavaScript, functions can be defined in several ways, including function declarations, expressions, and ES6 arrow functions. Understanding how to define and invoke functions is crucial for any JavaScript developer.

Function Definition

A function in JavaScript is defined using the function keyword, followed by a name, a list of parameters enclosed in parentheses (), and the function body enclosed in curly braces {}.

Image

Syntax

Javascript
. . . .
  • function is the keyword that starts the function definition.
  • functionName is the name of the function.
  • parameter1, parameter2, ... are the function's parameters (optional).
  • The code block within {} is executed when the function is called.

Example: Defining a Simple Function

Let's define a simple function that displays a greeting message. This example will demonstrate the basic structure of a function without parameters and return statements.

Javascript
. . . .
  • function greet() { ... } defines a function named greet.
  • Inside the function, console.log("Hello, world!"); logs a greeting message to the console. This demonstrates the basic structure and invocation of a function without parameters or a return statement.

Invocation of Function

Functions are called or invoked by using their name followed by parentheses. This process executes the code defined within the function.

Example: Invoking a Function

Here, we will call the function we defined earlier to display the greeting message.

Javascript
. . . .
  • greet(); invokes the greet function, which causes "Hello, world!" to be printed to the console.

Function Parameters

Parameters are named variables passed into a function. They allow functions to accept input and behave differently based on that input.

Example: A Function with Parameters

In this example, we will define a function that takes a name as a parameter and prints a personalized greeting message.

Javascript
. . . .
  • function greet(name) { ... } declares a function named greet that accepts one parameter: name.
  • Within the function, the console.log statement constructs a greeting message that includes the name parameter. This demonstrates how parameters can be used within a function to influence its behavior.
  • greet("Alice"); calls the greet function with the argument "Alice", resulting in the console output: "Hello, Alice!". This shows how to pass data into a function when calling it.

Return Statement

Functions can return an output value to the caller using the return statement.

Example: Returning a Value

Now, we'll create a function that calculates the square of a number and returns the result.

Javascript
. . . .
  • function square(number) { ... } sets up a function called square that takes a single parameter: number.
  • return number * number; calculates the square of number by multiplying it by itself and returns this value to the caller.
  • var result = square(4); calls the square function with 4 as the argument, and the return value (16) is stored in the variable result.
  • console.log(result); outputs the value of result to the console, which is 16, showing the function's return value is successfully captured and displayed.

Function Expression

Function expressions allow you to assign a function to a variable.

Example: Function Expression

In this example, we will create a function expression that checks if a number is even and print the result.

Javascript
. . . .
  • var isEven = function(number) { ... }; defines a function expression named isEven. The function takes one parameter (number) and returns true if the number is even (i.e., divisible by 2 without a remainder) and false otherwise.
  • The function is then called twice with different arguments (4 and 5), demonstrating how it evaluates each number. console.log(isEven(4)); checks if 4 is even, which it is, so it prints true. Similarly, console.log(isEven(5)); checks if 5 is even, which it isn't, so it prints false.
  • This example illustrates how function expressions can be used just like function declarations, but they also highlight the flexibility of assigning functions to variables.
Quiz
JavaScript - Variable Scope
Mark as Completed

On this page

Function Definition

Syntax

Example: Defining a Simple Function

Invocation of Function

Example: Invoking a Function

Function Parameters

Example: A Function with Parameters

Return Statement

Example: Returning a Value

Function Expression

Example: Function Expression